<template>
  <view class="empower-dialog">
    <van-action-sheet :show="showSheet">
      <view class="empower-main">
        <view class="empower-info">
          <view class="title">
            共享充电宝
          </view>
          <text class="apply">申请</text>
        </view>
        <view class="getUser">
          <h2>获取您的昵称、头像、手机号</h2>
          <p>用于个人中心、主页、清单及分享时展示</p>
        </view>
        <view class="empower-form">
          <van-cell custom-class="cell-class" title-class="cell-title" value-class="cell-value" title="头像" is-link>
            <view class="avatar">
              <!-- <image :src="avatarUrl" mode=""></image> -->
              <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image :src="avatarUrl" mode=""></image>
              </button>
            </view>
          </van-cell>
          <van-cell custom-class="cell-class" title-class="cell-title" value-class="cell-value" title="昵称" is-link>
            <input v-model="nickname" :adjust-position="false" type="nickname" class="weui-input" @change="onChooseName"
              placeholder="请输入昵称" placeholder-class="place" />
          </van-cell>
         <van-cell custom-class="cell-class" title-class="cell-title" value-class="cell-value" title="手机号" is-link>
            <button class="getPhoneNumber" open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber">
              <text v-if="mobile">{{mobile}}</text>
              <text v-else>点击获取手机号</text>
              </button>
          </van-cell>
        </view>
        <view class="empower-btn">
          <van-button custom-style="width: 90px; margin-right: 15px; height: 44px; border-radius: 5px;"
            @click="handleCancel" plain type="primary" color="#00c260">拒绝</van-button>
          <van-button custom-style="width: 90px; height: 44px; border-radius: 5px;" :disabled="btnState"
            @click="handleSave" color="#00c260" type="info">保存</van-button>
        </view>
      </view>
    </van-action-sheet>
  </view>
</template>

<script>
  import { login, getUserMobile } from '@/api/login.js'
  export default {
    data() {
      return {
        avatarUrl: '',
        nickname: '',
        mobile: '',
        showSheet: false
      }
    },
    computed: {
      btnState() {
        return !this.avatarUrl || !this.nickname || !this.mobile
      }
    },
    methods: {
      onChooseAvatar(e) {
        this.avatarUrl = e.detail.avatarUrl
      },
      onChooseName(e) {
        this.nickname = e.detail.value
      },
      handleCancel() {
        this.showSheet = false
      },
      async getPhoneNumber(e) {
        console.log(e);
        uni.login({
          success: async (res) => {
            const data = await login({
              jsCode: res.code
            })
            if (data.code === 200) {
              // console.log(e.detail.code);
              const phone = await getUserMobile({
                jsCode: e.detail.code,
              }, data.token)
              this.mobile = phone.data
            }
          }
        })
        // this.mobile = e.detail.code
      },
      handleSave() {
        const userInfo = {
          nickName: this.nickname,
          avatar: this.avatarUrl
        }
        this.$store.dispatch('user/login', userInfo)
        this.handleCancel()
      }
    }
  }
</script>

<style lang="less" scoped>
  ::v-deep .cell-class {
    display: flex !important;
    align-items: center !important;
  }

  ::v-deep .cell-title {
    flex: 0.3 !important;
  }

  ::v-deep .cell-value {
    font-size: 12px !important;
    text-align: left !important;
  }

  ::v-deep .place {
    font-size: 12px !important;
    font-family: 'PingFang-SC-Regular', sans-serif !important;
    color: #999999;
  }
  .empower-dialog {
    .empower-main {
      padding: 25px;
    }

    .empower-info {
      display: flex;
      align-items: center;

      .title {
        font-size: 14px;
        font-weight: 700;
      }

      .apply {
        margin-left: 6px;
        font-size: 14px;
        font-weight: 700;
      }
    }

    .getUser {
      margin-top: 15px;
      margin-bottom: 20px;

      h2 {
        font-size: 16px;
        font-weight: 700;
      }

      p {
        margin-top: 5px;
        font-size: 12px;
        color: #999999;
      }
    }

    .empower-form {
      .avatar {
        display: flex;
        align-items: center;

        .avatar-wrapper {
          width: 100%;
          display: flex;
          align-items: center;
          padding: unset;
          overflow: hidden;
          margin: unset;
          border-radius: unset;
          background-color: unset;

          &::after {
            border: none;
          }
        }

        image {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          border: 2px solid #F1F1F1;
          object-fit: contain;
        }
      }

      .getPhoneNumber {
        text-align: left;
        font-size: 12px;
        padding: unset;
        color: #999999;
        margin: unset;
        border-radius: unset;
        background-color: unset;
        font-family: 'PingFang-SC-Regular', sans-serif !important;

        &::after {
          border: none;
        }
      }

      .weui-input {
        font-size: 12px !important;
        font-family: 'PingFang-SC-Regular', sans-serif !important;
        color: #999999;
      }
    }

    ::v-deep .empower-btn {
      display: flex;
      justify-content: center;
      margin-top: 25px;
      padding: 0 15px;

      .van-cell {
        display: flex;
        align-items: center;
        padding: 0 0 10px !important;
        margin-bottom: 10px;
      }

      .van-cell:after {
        left: 0;
        right: 0;
      }

      .van-button--primary {
        flex: 1;
        border-radius: 5px;
        font-size: 15px;
      }

      .van-button--normal {
        border-radius: 5px;
        font-size: 15px;
      }

      .van-button {
        flex: 1;
        width: 90px;
        margin-right: 15px;
        height: 44px;
      }
    }
  }
</style>
